import type { SpreadsheetSkeleton, UniverRenderingContext } from '@univerjs/engine-render';
import { DEFAULT_FONTFACE_PLANE, FIX_ONE_PIXEL_BLUR_OFFSET, getColor, SheetExtension } from '@univerjs/engine-render';

// 定义唯一键值，用于标识这个自定义的扩展
const UNIQUE_KEY = 'ColumnHeaderCustomExtension';

// 定义一个自定义表情符号列表，将在每个列头上显示
const customEmojiList = ['🍎', '🍌', '🍒', '🍓', '🍅', '🍆', '🍇', '🍈', '🍉', '🍊'];

// 定义 ColumnHeaderCustomExtension 类，继承自 SheetExtension，用于在列头上显示自定义表情符号
export class ColumnHeaderCustomExtension extends SheetExtension {
  // 重写唯一键值，确保唯一标识扩展
  override uKey = UNIQUE_KEY;

  // 设置扩展的层级（z-index），必须大于 10，以确保在其他内容之上
  override get zIndex() {
    return 11;
  }

  // 重写 draw 方法，负责在画布（canvas）上绘制列头
  override draw(ctx: UniverRenderingContext, _: any, spreadsheetSkeleton: SpreadsheetSkeleton) {
    // 从 spreadsheetSkeleton 中解构出列分段信息和列头高度
    const { rowColumnSegment, columnHeaderHeight = 0 } = spreadsheetSkeleton;
    const { startColumn, endColumn } = rowColumnSegment;

    // 如果 spreadsheetSkeleton 不存在，则直接返回
    if (!spreadsheetSkeleton) {
      return;
    }

    // 从 spreadsheetSkeleton 中解构出累积的行列宽高数据和总宽高
    const { rowHeightAccumulation, columnTotalWidth, columnWidthAccumulation, rowTotalHeight } = spreadsheetSkeleton;

    // 如果任意一个关键属性缺失，则不执行绘制操作
    if (!rowHeightAccumulation || !columnWidthAccumulation || columnTotalWidth === undefined || rowTotalHeight === undefined) {
      return;
    }

    // 设置列头的背景颜色
    ctx.fillStyle = getColor([248, 249, 250]);

    // 设置文本对齐方式为居中
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillStyle = getColor([0, 0, 0]); // 设置文本颜色为黑色
    ctx.beginPath();
    ctx.lineWidth = 1; // 设置线宽度

    // 防止边界模糊的偏移值，使绘制的边界在高分屏下更清晰
    ctx.translateWithPrecisionRatio(FIX_ONE_PIXEL_BLUR_OFFSET, FIX_ONE_PIXEL_BLUR_OFFSET);

    // 设置列头的分隔线颜色
    ctx.strokeStyle = getColor([217, 217, 217]);

    // 设置字体大小和字体样式
    ctx.font = `13px ${DEFAULT_FONTFACE_PLANE}`;

    // 初始化前一列位置为 0
    let preColumnPosition = 0;
    const columnWidthAccumulationLength = columnWidthAccumulation.length;

    // 遍历指定范围的列
    for (let c = startColumn - 1; c <= endColumn; c++) {
      // 检查列索引有效性，超出范围的列直接跳过
      if (c < 0 || c > columnWidthAccumulationLength - 1) {
        continue;
      }

      // 获取当前列的终止位置
      const columnEndPosition = columnWidthAccumulation[c];

      // 如果列的终止位置等于前一列的位置，表示该列是隐藏列，跳过
      if (preColumnPosition === columnEndPosition) {
        continue;
      }

      // 计算列的中间位置，方便绘制表情符号居中
      const middleCellPos = preColumnPosition + (columnEndPosition - preColumnPosition) / 2;

      // 绘制表情符号在列头中间位置，并向右偏移 20 像素
      customEmojiList[c] && ctx.fillText(customEmojiList[c], middleCellPos + 20, columnHeaderHeight / 2);

      // 更新前一列的位置为当前列的结束位置，用于下一列计算
      preColumnPosition = columnEndPosition;
    }

    // 绘制所有的分隔线
    ctx.stroke();
  }
}
